React ReactQuery useQuery
#React
useQueryのisLoadingがtrueになるタイミング
hr.icon
1. useQueryが対象コンポーネントにマウントされた時点では常にtrueである
これ一番の基本なので押さえておく。
原則として、useQueryの引数に設定してるクエリ関数が完了したら「false」になるとのこと。
ちなみに、クエリ関数が実行される例としては...
1：enbaled: trueになった時
2：refetch関数実行した時
などかな
なお、もしenabled: falseとハード値で設定した場合、、クエリ関数が実行されないのでrefetchとかで自発的に実行しないとisLoadingがfalseにならないよ。注意ね。
重要.icon注意.icon 対象クエリキーのキャッシュが存在して古くない場合、isLoadingはマウント時にfalseに設定されてる。
なのでローディングされない。
onigiri.w2.iconが検証した感じ、そうだと思う。
2. useQueryのクエリキーに設定してる変数の値が変わって、かつ、そのクエリキーのキャッシュが無い場合、trueに変わる
これもonigiri.w2.iconが検証したので合ってると思う。
キャッシュが存在しないと、isLoadingがtrueに変わっちゃう。
code: sample.js
...
const hoge, setHoge = useState('hoge');
const {isLoading, data, refetch} = useQuery('data', hoge, fetchFunction, {enabled: true})
...
注意.icon enabled: falseと設定してる場合、isLoadingがtrueに変わった後、勝手にクエリ関数が実行されることはない。なので、自動でisLoadingがfalseに変わることはないので注意。
ページネーションとかする場合
hr.icon
ページネーションしようと思って以下のように実装した場合、isLoadingがページ移動の度に入って動作ががたつく。（ただし、キャッシュがある場合はガタつかないけど）
code: sample.js
...
const page, setPage = useState(1);
const {isLoading, data, refetch} = useQuery('data', page, fetchFunction, {enabled: true})
...
keepPreviousDataオプションを有効にするといいらしい。
参考：
Tanstack Query (ex. React Query) ｜ Yuuniworks Note
キャッシュがあるならマウント時にそのデータがdataプロパティに入ってる
hr.icon
code: sample.js
...
const {isLoading, data, refetch} = useQuery('data', fetchFunction, {enabled: true})
...
重要.icon キャッシュが存在しない場合、クエリ関数が完了してデータが返ってこない限り、dataにデータは入らない。
この時、isLoadingがfalseになるタイミングが、dataの中身が入るタイミングだろう。
この特性を理解して以下のコードを見て何を思うか。
code: sample.js
...
const {isLoading, data, refetch} = useQuery('data', fetchFunction, {enabled: false})
...
a.icon もしキャッシュがあったら、dataにはそのデータが入ってる。
これ、enabled: falseなので、自動でクエリ関数が実行されることはないんだけど、キャッシュデータがあるので、それがdataにはいることになる。
注意.icon クエリ関数が実行されないので、isLoadingはtrueのまま。
refetchはキャッシュの有無に関わらず常にクエリ関数を実行する（多分）
hr.icon
onigiri.w2.iconが検証した感じは、refetchを実行した場合、キャッシュの有無に関わらず、必ずクエリ関数を実行すると思われる。
ていうか結構な確率でそうだと思う。
なんか注意点やらキャッシュ使う場合があるとかなら、それを後で追記する。現状の理解は上記で。
refetchがfalseの場合、invalidateQueriesおよびrefetchQueriesを実行しても意味ない
hr.icon
React-Queryとは？使い方と重要性を分かりやすく解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
invalidateQueriesおよびrefetchQueriesが発火された場合でも、再クエリしません。
って書いてるのが見えた。
まだ検証してないけど、ただfalseだとそうかもなぁって思える。謎に。
時間あったら検証する。
一旦、基本の形を覚えておこかな
hr.icon
code: sample.js
export const Hoge = () => {
const { isLoading, isError, data } = useQuery('hoge', hogeFetch};
if (isLoading) return <div>loading...</div>;
if (isError) return <div> error raised</div>;
return (
<div>this is content</div>
);
}
この形が基本になるかなと思われます。
まあisErrorの部分は最悪必要ないかも。